<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" 
xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>用户注册界面</title>
<style type="text/css" th:href="@{/css/common.css}"></style>
</head>
<body>
	<div>
		<div>
			<span>用户名：</span>
			<input type="text" name="username"  />
		</div>
		<div>
			<span>昵称：</span>
			<input type="text" name="name" />
		</div>
		<div>
			<span>密码：</span>
			<input type="password" name="password" />
		</div>
		<div>
			<span>手机号码:</span>
			<input type="text" name="mobile"  />
		</div>
		<div class="register-tip">
			
		</div>
		<input  type="button" id="registerBtn" value="注册" />
	</div>
	<script th:src="@{/js/plugins/jquery-1.11.1.js}"></script>
	<script>
	//<![CDATA[
		$(document).ready(function(){
			$('#registerBtn').bind('click' , function(){
				var username = $('input[name=username]').val();
				var name = $('input[name=name]').val();
				var password = $('input[name=password]').val();
				var mobile = $('input[name=mobile]').val();
				var param = {
					username : username,
					name : name,
					password : password,
					mobile : mobile
				};
				
				var paramJson = JSON.stringify(param);
				
				if(paramJson){
					// 提交
					$.ajax({
						url : './ajaxRegister',
						method : 'post',
						asyjc : true,
						data : paramJson,
						contentType : 'application/json',
						dataType : 'json',
						success : function(data){
							if(data && data.status == 'ok'){
								$('.register-tip').html('用户注册成功');
								// 如果用户注册成功，则在三秒后自动跳转到登陆界面
								setTimeout(function(){									
									window.location.href = './login';
								});
							}else{
								$('.register-tip').html('用户注册失败,'  + data.msg);
							}
						},
						error : function(xhr , error , status){
							alert('发生了错误');
						}
					});
				}
			});
		});
		//]]>
	</script>
</body>
</html>